<template>
  <div class="weight-success">
    <div class="title">操作成功</div>
    <div class="second-title">欢迎下次使用</div>
    <img src="@/assets/img/success-icon.jpg" class="success-icon" />
    <div class="rows">
      <div class="row">
        <div class="label">日期：</div>
        <div class="value">{{ baseOrder.createDate }}</div>
      </div>
      <div class="row">
        <div class="label">操作人：</div>
        <div class="value">{{ baseOrder.createName }}</div>
      </div>
      <div class="row">
        <div class="label">初磅重量：</div>
        <div class="value">{{ saveWeightToShow(baseOrder.firstWeight) }}{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">过磅方式：</div>
        <div class="value">
          {{ baseOrder.weightInTypeName }}
          <img crossOrigin="Anonymous" :src="baseOrder.weightInTypeImg" />
        </div>
      </div>
      <div class="row">
        <div class="label">{{ numberToChinese(baseOrder.materialInfo.length + 1) }}磅重量：</div>
        <div class="value">{{ saveWeightToShow(baseOrder.lastWeight) }}{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">过磅方式：</div>
        <div class="value">
          {{ baseOrder.weightOutTypeName }}
          <img crossOrigin="Anonymous" :src="baseOrder.weightOutTypeImg" />
        </div>
      </div>
      <div class="row">
        <div class="label">扣杂：</div>
        <div class="value">{{ saveWeightToShow(baseOrder.inspectImpurity) }}{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">预估干基：</div>
        <div class="value">{{ saveWeightToShow(baseOrder.weightPure) }}{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">单价：</div>
        <div class="value">{{ savePriceToShow(baseOrder.priceTaxOut) }}元/{{ weightUnit }}</div>
      </div>
      <div class="row">
        <div class="label">总价：</div>
        <div class="value">{{ baseOrder.totalAmountTaxOut }}元</div>
      </div>
    </div>
    <div class="btn-container">
      <div class="btn" @click="cancel">立即结束({{ second }})</div>
      <div class="btn print" @click="print">打印小票</div>
    </div>
  </div>
</template>
<script setup>
import api from '@/api/index'
import { ref, reactive, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import qrCode from '@/assets/img/qr-code.svg'
import idCard from '@/assets/img/id-card.svg'
import face from '@/assets/img/face.svg'
import retail from '@/assets/img/retail.svg'

import { getWeightUnit, saveWeightToShow, savePriceToShow } from '@/libs/unit'
import { numberToChinese } from '@/libs/utils'
import { useUserStore } from '@/stores/user'
const userStore = useUserStore()
const weightUnit = getWeightUnit()
const route = useRoute()
const router = useRouter()
const baseOrder = reactive({
  createDate: '',
  createName: '',
  code: '',
  firstWeight: '',
  weightInType: '',
  weightInTypeName: '',
  weightInTypeImg: '',
  lastWeight: '',
  weightOutType: '',
  weightOutTypeName: '',
  weightOutTypeImg: '',
  inspectImpurity: '',
  weightPure: '',
  priceTaxOut: '',
  totalAmountTaxOut: '',
  materialInfo: []
})
let printData = {}
function print() {
  const temp = JSON.parse(localStorage.settings)
  if (temp.print.type === '1') {
    printData.createDate = printData.createDate.split(' ')[0].split('-').join('/')
    const weightInDateArr = printData.weightInDate.split(' ')
    printData.weightInDate =
      weightInDateArr[0].split('-').join('/') +
      ' ' +
      weightInDateArr[1].split(':').slice(0, 2).join(':')
    if (printData.totalAmountTaxOut === null) {
      printData.totalAmountTaxOut = '-'
    }
    let i = 2
    for (const item of printData.materialInfo) {
      const weightOutDateArr = item.createDate.split(' ')
      item.createDate =
        weightOutDateArr[0].split('-').join('/') +
        ' ' +
        weightOutDateArr[1].split(':').slice(0, 2).join(':')
      item.timeName = numberToChinese(i)
      i++
    }
    const printArr = []
    printArr.push(['单号', printData.baseOrderNo])
    if (printData.flow === '1') {
      printArr.push(['供应商', printData.supplierName])
    } else {
      printArr.push(['客户', printData.customerName])
    }
    printArr.push(['车牌号', printData.number])
    printArr.push(['初磅重量', saveWeightToShow(printData.firstWeight) + weightUnit])
    printArr.push(['过磅时间', printData.weightInDate])
    for (const item of printData.materialInfo) {
      printArr.push([item.timeName + '磅重量', saveWeightToShow(item.weightOut) + weightUnit])
      printArr.push(['过磅时间', item.createDate])
    }
    printArr.push(['单价', savePriceToShow(printData.priceTaxOut) + '元'])
    printArr.push(['总价', printData.totalAmountTaxOut + '元'])
    const json = JSON.stringify(printArr)
    console.log(json)
    window.android.print(userStore.user.companyName, json)
  }
  if (temp.print.type === '2') {
    router.push({
      path: '/Print',
      query: route.query
    })
  }
}
const second = ref(0)
let interval = null

function cancel() {
  clearInterval(interval)
  interval = null
  router.back()
  window.android.faceCancel()
}
onMounted(() => {
  const id = route.query.id
  api.baseOrderDetail({ id }).then((res) => {
    if (res.data.totalAmountTaxOut === null) {
      res.data.totalAmountTaxOut = '-'
    }
    printData = res.data
    for (const key in baseOrder) {
      baseOrder[key] = res.data[key]
      baseOrder.createDate = baseOrder.createDate.split(' ')[0].split('-').join('/')
      switch (baseOrder.weightOutType) {
        case '1':
          baseOrder.weightOutTypeName = '二维码过磅'
          baseOrder.weightOutTypeImg = qrCode
          break
        case '2':
          baseOrder.weightOutTypeName = '刷脸过磅'
          baseOrder.weightOutTypeImg = face
          break
        case '3':
          baseOrder.weightOutTypeName = '刷证过磅'
          baseOrder.weightOutTypeImg = idCard
          break
        case '4':
          baseOrder.weightOutTypeName = '散户过磅'
          baseOrder.weightOutTypeImg = retail
          break
        case '5':
          baseOrder.weightOutTypeName = 'IC卡过磅'
          baseOrder.weightOutTypeImg = idCard
          break
      }
      switch (baseOrder.weightInType) {
        case '1':
          baseOrder.weightInTypeName = '二维码过磅'
          baseOrder.weightInTypeImg = qrCode
          break
        case '2':
          baseOrder.weightInTypeName = '刷脸过磅'
          baseOrder.weightInTypeImg = face
          break
        case '3':
          baseOrder.weightInTypeName = '刷证过磅'
          baseOrder.weightInTypeImg = idCard
          break
        case '4':
          baseOrder.weightInTypeName = '散户过磅'
          baseOrder.weightInTypeImg = retail
          break
        case '5':
          baseOrder.weightInTypeName = 'IC卡过磅'
          baseOrder.weightInTypeImg = idCard
          break
      }
    }
  })
  if (interval === null) {
    second.value = 60
    interval = setInterval(() => {
      second.value--
      if (second.value === 0) {
        cancel()
      }
    }, 1000)
  }
})
</script>
<style lang="scss">
@media screen and (max-width: 1080px) {
  .weight-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    .title {
      font-size: 50px;
      margin-top: 17px;
    }
    .second-title {
      font-size: 20px;
      margin-top: 6px;
    }
    .success-icon {
      width: 80px;
      height: 80px;
      margin-top: 6px;
      margin-bottom: 6px;
    }
    .rows {
      width: 100%;
      display: flex;
      flex-direction: column;

      .row {
        display: flex;
        flex-direction: row;
        font-size: 18px;
        width: 100%;
        .label {
          width: 90px;
          margin-left: 40px;
        }
        .value {
          flex: 1;
          margin-right: 40px;
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: flex-end;
          img {
            width: 21px;
            height: 21px;
            margin-left: 6px;
          }
        }
      }
      .row + .row {
        margin-top: 3px;
      }
    }
    .btn-container {
      display: flex;
      flex-direction: row;
      margin-top: 20px;
      .btn {
        width: 120px;
        height: 45px;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        border-radius: 6px;
        border: 2px solid #333333;
      }
      .btn.print {
        color: #4a90e2;
        border-color: #4a90e2;
      }
      .btn + .btn {
        margin-left: 70px;
      }
    }
  }
}

@media screen and (min-width: 1920px) {
  .weight-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-weight: bold;
    .title {
      font-size: 16px;
      margin-top: 6px;
    }
    .second-title {
      font-size: 10px;
      margin-top: 2px;
    }
    .success-icon {
      width: 20px;
      height: 20px;
      margin-top: 2px;
      margin-bottom: 5px;
    }

    .rows {
      width: 80%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      .row {
        display: flex;
        flex-direction: row;
        font-size: 12px;
        width: 50%;
        .value {
          flex: 1;
          display: flex;
          flex-direction: row;
          align-items: center;
          img {
            width: 14px;
            height: 14px;
            margin-left: 2px;
          }
        }
      }
      .row + .row {
        margin-top: 1px;
      }
    }
    .btn-container {
      display: flex;
      flex-direction: row;
      margin-top: 10px;
      .btn {
        width: 80px;
        height: 25px;
        background-color: #ffffff;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        border-radius: 3px;
        border: 2px solid #333333;
      }
      .btn.print {
        color: #4a90e2;
        border-color: #4a90e2;
      }
      .btn + .btn {
        margin-left: 43px;
      }
    }
  }
}
</style>
